<!--
 * @Description: 个人中心会员-非会员组件
 * @Author: 老五 13521685612@163.com
 * @Date: 2024-11-09 14:45:37
 * @LastEditors: 老五 13521685612@163.com
 * @LastEditTime: 2024-11-20 23:44:02
 * @FilePath: /lieshou-app/components/z-user-card.vue
-->

<template>
	<view>
		<!-- 用户信息 -->
		<view class="user-box" v-if="!isCard">
			<button class="user-logo-box" @click="getAvatar">
				<image
					:src="userInfo.avatar?userInfo.avatar:'https://img.js.design/assets/img/5fe2c34f85f6379fa22d6652.png'"
					class="user-logo">
				</image>
			</button>

			<view class="user-info">
				<view class='user-name'><input @blur='getUserName' type='nickname' name='nickname'
						:value='userInfo.nickname' placeholder=""></input></view>
				<!-- <view class="user-tag-box">
					<view class="user-num">学分： 165分</view>
				</view> -->
				<view class="user-tag" @click="getStudent" v-if="isCrown">
					<image src="@/static/image/icon/hg-icon.png" class="icon"></image>
					完善学籍，为自己开启情感的护航~
					<view class="right-icon">
						<image src="@/static/image/icon/right-icon.png"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 会员user -->
		<view class="bg-boxs" v-if="isCard">
			<view class="card-user-box">
				<image class="card-icon" src="@/static/image/icon/huiyuan-icon.png"></image>
				<view class="card-user-box-flex">
					<!-- <button open-type="chooseAvatar" class="user-logo-box" @chooseavatar="getAvatar"> -->
					<button class="user-logo-box" @click="getAvatar">
						<image
							:src="userInfo.avatar?userInfo.avatar:'https://img.js.design/assets/img/5fe2c34f85f6379fa22d6652.png'"
							class="user-logo">
						</image>
					</button>
					<view class="user-info">
						<view class='user-name'><input @blur='getUserName' type='nickname' name='nickname'
								:value='userInfo.nickname' placeholder=""></input></view>
						<!-- <view class="user-tag-box">
							<view class="user-num">学分： 165分</view>
						</view> -->
					</view>
				</view>
				<!-- 会员标识&&解锁 -->
				<view class="card-label-box">
					<image class="icon" src="@/static/image/icon/icon-card.png"></image>
					<view class="card-label-box-title"
						:style="cardIns.length>1?'justify-content: flex-start;':'justify-content: space-between;'">
						<!-- ·亲密关系·婚姻家庭会员 -->
						<view class="card-user-tag" v-for="(item,index) in cardIns">
							{{index!==(cardIns.length-1)?item.name.slice(0, -2):item.name}}<span v-if='index!==(cardIns.length-1)'> · </span>
						</view>
						<!-- <view class="card-open-tag" style="">已解锁 <span>32份奖励 ></span></view> -->
					</view>
				</view>
				<view class="card-press-box">
					<!-- <zSlider press='80%'></zSlider> -->
				</view>
				<view class="card-desc-box">
					<!-- 	<view class="card-desc-box-title"><span>一年级</span> 还差25学分升级 二年级</view>
					<view class="card-desc-box-num">100学分</view> -->
				</view>
			</view>
			<view class="bgbo"></view>
		</view>

	</view>
</template>

<script>
	import zSlider from '@/components/z-slider.vue'
	export default {
		components: {
			zSlider
		},
		props: ['isCard', 'userInfo', 'cardIns'],
		name: "z-user-card",
		data() {
			return {

			};
		},
		methods: {
			// 选择头像
			getAvatar(e) {
				console.log('e', e)
				this.$emit('getAvatar', e)
			},
			// 学籍编辑
			getStudent() {
				uni.navigateTo({
					url: "/pages/my_academic"
				})
			},
			// 昵称
			getUserName(e) {
				this.$emit('getUserName', e)
			},
		}
	}
</script>

<style lang="scss">
	// 用户信息
	.user-box {
		width: 694rpx;
		height: 160rpx;
		display: flex;
		align-items: center;
		margin: 0 auto;
		margin-bottom: 26rpx;
		margin-top: 32rpx;

		::v-deep .user-logo-box {
			background-color: #fff !important;
			border-radius: 50% !important;
			width: 170rpx !important;
			height: 170rpx !important;
			margin-left: 14rpx !important;
			display: flex;
			align-items: center;
			padding: 0 !important;
			justify-content: center;
			margin-right: 40rpx !important;
			opacity: 1;

			.user-logo {
				// border-radius: 50%;
				width: 100%;
				height: 100%;
				background-color: #fff !important;
				object-fit: cover;
				// margin-left: 14rpx;
				// margin-right: 40rpx;
				opacity: 1;


			}
		}


		.user-info {
			.user-name {
				margin-bottom: 10rpx;
				width: 300rpx;
				opacity: 1;
				font-size: 40rpx;
				/* 默认：文字显示不开时自动换行 */
				/* white-space: nowrap; */
				/* 1.文字显示不开时强制一行显示 */
				white-space: nowrap;
				/* 2.超出部分隐藏 */
				overflow: hidden;
				/* 3.超出部分省略号显示 */
				text-overflow: ellipsis;

				font-weight: 700;
				color: rgba(0, 0, 0, 1);
				margin-left: 5rpx;
				text-align: left;
				vertical-align: top;

			}

			.user-tag-box {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-weight: 300;
				margin-left: 5rpx;
				color: rgba(0, 0, 0, 1);
				text-align: left;
				vertical-align: top;

				.user-num {
					font-size: 30rpx;
					height: 40rpx;

				}

			}

			.user-tag {
				margin-top: 14rpx;
				font-size: 20rpx;
				font-weight: 400;
				height: 44rpx;
				color: rgba(51, 51, 51, 1);
				text-align: left;
				padding-right: 20rpx;
				display: flex;
				align-items: center;
				border-radius: 20rpx;
				background: linear-gradient(93.89deg, rgba(255, 232, 158, 1) 0%, rgba(241, 218, 167, 1) 100%);

				.icon {
					width: 28rpx;
					height: 28rpx;
					margin-left: 10rpx;
					margin-right: 14rpx;
				}

				.right-icon {
					display: flex;
					width: 26rpx;
					height: 26rpx;
					justify-content: center;
					background-color: rgba(241, 177, 66, 1);
					border-radius: 50%;
					align-items: center;
					margin-left: 13rpx;

					image {
						width: 6rpx;
						height: 11rpx;
					}
				}
			}
		}
	}

	.bg-boxs {
		position: relative;

		// 会员用户
		.card-user-box {
			width: 712rpx;
			position: relative;
			z-index: 9;
			margin: 0 auto;
			opacity: 1;
			margin-top: 26rpx;
			padding-bottom: 25rpx;
			border-radius: 40rpx;
			background: linear-gradient(148.48deg, rgba(239, 240, 251, 1) 0%, rgba(228, 212, 254, 1) 59.21%, rgba(171, 195, 255, 1) 100%);
			border: 2rpx solid rgba(239, 240, 251, 1);

			.card-icon {
				width: 291rpx;
				position: absolute;
				right: 12rpx;
				object-fit: cover;
				height: 167rpx;
				top: -20rpx;
			}

			.card-user-box-flex {
				display: flex;
				align-content: center;
				align-items: center;
				margin-top: 28rpx;

				::v-deep .user-logo-box {
					background: #fff;
					border-radius: 50% !important;
					width: 116rpx !important;
					height: 116rpx !important;
					display: flex;
					margin-left: 32rpx !important;
					align-items: center;
					padding: 0 !important;
					justify-content: center;
					margin-right: 40rpx !important;
					opacity: 1;

					.user-logo {
						border-radius: 50%;
						width: 100%;
						background-color: #fff;
						height: 100%;
						object-fit: cover;
					}
				}

				.user-info {
					.user-name {
						margin-bottom: 10rpx;
						width: 170rpx;
						opacity: 1;
						font-size: 40rpx;
						font-weight: 700;
						color: rgba(0, 0, 0, 1);
						text-align: left;
						vertical-align: top;

					}

					.user-tag-box {
						display: flex;
						align-items: center;
						font-size: 28rpx;
						font-weight: 300;
						margin-left: 5rpx;
						color: rgba(0, 0, 0, 1);
						text-align: left;
						vertical-align: top;

						.user-num {
							font-size: 30rpx;
							height: 40rpx;

						}

					}


				}
			}

			.card-label-box {
				display: flex;
				justify-content: space-around;
				margin-left: 42rpx;
				margin-top: 32rpx;

				.icon {
					width: 26rpx;
					position: relative;
					// top: 5rpx;
					top: 8rpx;
					height: 26rpx;
					margin-right: 22rpx;
				}

				.card-label-box-title {
					display: flex;
					flex-wrap: wrap;
					align-items: center;

					width: 610rpx;

					.card-user-tag {
						font-size: 28rpx;
						display: flex;
						align-items: center;
						font-weight: 400;
						letter-spacing: 0px;
						color: rgba(75, 62, 249, 1);
						text-align: left;
					}

					.card-open-tag {
						font-size: 24rpx;
						margin-right: 30rpx;
						font-weight: 300;
						padding-top: 12rpx;
						color: rgba(55, 42, 191, 1);

						span {
							font-size: 24rpx;
							font-weight: 700;
							color: rgba(87, 72, 255, 1);
							text-align: left;
							vertical-align: top;
						}
					}
				}
			}

			// 进度条
			.card-press-box {
				margin-left: 43rpx;
				margin-top: 20rpx;
			}

			.card-desc-box {
				width: 615rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 0 auto;
				margin-top: 16rpx;

				.card-desc-box-title {
					span {
						font-size: 24rpx;
						font-weight: 700;
						margin-right: 10rpx;
						color: rgba(55, 42, 191, 1);
					}

					font-size: 24rpx;
					font-weight: 300;
				}

				.card-desc-box-num {
					font-size: 24rpx;
					font-weight: 700;
					letter-spacing: 0px;
					color: rgba(55, 42, 191, 1);
					text-align: left;
					vertical-align: top;
				}
			}
		}

		.bgbo {
			width: 100%;
			height: 150rpx;
			position: absolute;
			bottom: 0rpx;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			background-color: #fff;
		}
	}
</style>